<!--
 * @Author: hua
 * @Date: 2020-07-21 15:21:54
 * @description: 
 * @LastEditors: hua
 * @LastEditTime: 2020-07-22 09:06:40
--> 
<template>
  <!--内容-->
  <div class="container">
    <el-form
      :model="reqData"
      ref="modifyPasswordForm"
      label-width="200px"
      class="modify_password_form"
    >
      <el-form-item
        :label="$t('NewPassword')"
        prop="newPassword"
        :rules="[
            { required: true, message: `${$t('NewPassword')} ${$t('isRequired')}`}
          ]"
      >
        <el-input
          id="inputNewPassword"
          autofocus
          v-model="reqData.newPassword"
          :placeholder="$t('inputNewPassword')"
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="$t('OldPassword')"
        prop="oldPassword"
        :rules="[
            { required: true, message: `${$t('OldPassword')} ${$t('isRequired')}`}
          ]"
      >
        <el-input v-model="reqData.oldPassword" :placeholder="$t('inputOldPassword')"></el-input>
      </el-form-item>
      <el-form-item class="reverse">
        <el-button type="primary" @click="onSubmit">{{$t("UpdatePasswordScreen")}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Message, MessageBox } from "element-ui";
import { isvalidUsername } from "@/utils/validate";
import { updatePassword } from "@/api/user";
export default {
  data() {
    return {
      reqData: {
        appUserId: "",
        newPassword: "",
        oldPassword: ""
      }
    };
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  mounted() {
    let inputelement = document.getElementById("inputNewPassword");
    inputelement.focus();
  },
  methods: {
    onSubmit() {
      this.$refs["modifyPasswordForm"].validate(valid => {
        if (valid) {
          this.reqData.appUserId = this.userInfo.id;
          updatePassword(
            this.reqData.appUserId,
            this.reqData.newPassword,
            this.reqData.oldPassword
          ).then(res => {
            console.log(res.body);
            Message({
              message: `${this.$t("UpdatePasswordScreen") +
                " " +
                this.$t("success")}`,
              type: "success",
              duration: 5 * 1000
            });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
.container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.modify_password_form {
  width: 80%;
}
.reverse {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
@media (max-width: 500px) {
  .left_container {
    flex: 65px 0 0;
  }
}
</style>
